<script setup lang="ts" name="App">
import HomeCategory from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeBrand from './components/home-brand.vue'
import HomeProduct from './components/home-product.vue'
import HomeSpecial from './components/home-special.vue'
</script>
<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />
        <!-- banner轮播图 -->
        <HomeBanner></HomeBanner>
      </div>
    </div>
    <!-- 新鲜好物 -->
    <HomeNew></HomeNew>
    <!-- 人气推荐 -->
    <HomeHot></HomeHot>
    <!-- 热门品牌
      1:创建对应热门品牌组件（完成基本htmlcss结构）
      2：在home页使用
      3：在pinia的home模块创建state用于存储热门品牌的数据，创建actions调用接口获取数据
      4:在热门品牌组件内触发调用
      5：定义数据类型
      6：存储数据
      7：渲染数据
    -->
    <HomeBrand></HomeBrand>
    <!-- 商品区块
     1：创建组件完成结构
     2：在home页导入使用
     3：定义pinia内的state与actions
     4:在商品区块组件中调用actions
     5:定义数据类型
     6：存储数据
     7：渲染数据
    -->
    <HomeProduct></HomeProduct>
    <!-- 专题 -->
    <HomeSpecial></HomeSpecial>
  </div>
</template>
<style></style>
